.nav-container {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 50px;
  display: flex;
  flex-flow: row nowrap;
  background-color: #1a1a1a;

  .nav-left {
    width: 20%;
    position: relative;

    .icon, .icon-active {
      width: 40px;
      height: 40px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: absolute;
      top: -30%;
      left: 30%;
      z-index: 10000;
    }

    .icon {
      background-image: url("https://s1.imagehub.cc/images/2024/06/12/a9f35ee5f0b5bb65409ef4ee7d97cafd.th.png");
    }

    .icon-active {
      background-image: url("https://s1.imagehub.cc/images/2024/06/12/6b65e5c2aa8ec188049ed3272a28959d.th.png");

      .count {
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 50%;
        color: #ffffff;
        background-color: red;
        font-size: 12px;
        position: absolute;
        right: -4px;
        bottom: 0;
      }
    }
  }

  .nav-right {
    width: 20%;
    line-height: 50px;
    color: #ffffff;
    text-align: center;
  }

  .active {
    background-color: $color;
    font-size: 16px;
    color: #1a1a1a;
  }

  .nav-middle {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;

    .total {
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #ffffff;

      > span {
        font-size: 18px;
      }
    }

    .carry-fee {
      flex: 1;
      color: #888c98;
      font-size: 12px;
    }
  }
}

/*购物车列表样式*/

.shopping-container {
  width: 100%;
  height: 300px;
  display: flex;
  flex-flow: column nowrap;
  border-radius: 10px 10px 0 0;
  background-color: #ffffff;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  z-index: 8888;

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 70px;
    border-top: 1px solid #cccccc;
  }

  .title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 10px;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
    border-bottom: 1px solid #cccccc;

    .txt {
      font-weight: 700;
    }
  }

  .shopping {
    padding: 0 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    overflow-x: hidden;


    .list {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: flex-end;
      margin: 10px 0;

      .left {
        display: flex;
        flex-flow: row nowrap;
        height: 70px;

        > img {
          margin-right: 10px;
          border-radius: 10px;
        }

        .simple {
          height: 100%;
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-start;

          .name {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 8px;
          }

          .price {
            color: red;
            font-size: 18px;
          }
        }
      }

      .right {
        display: flex;
        flex-flow: row nowrap;
        padding: 10px 0;
        box-sizing: border-box;

        .inc, .dec {
          width: 16px;
          height: 16px;
          text-align: center;
          line-height: 16px;
          background-color: $color;
          border-radius: 50%;
          font-weight: 700;

        }

        .total {
          margin: 0 8px;
        }

      }

    }
  }
}

.mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: -50px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 7777;

}